<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动收集表单数据</title>
</head>
<body>
<!--
    v-model默认收集的其实是你表单当中value的值
    -->
<div id="root">
    <label >
        用户名:<input type="text" v-model="userInfo.username">
    </label>
    <label >
        密码:<input type="password" v-model="userInfo.password">
    </label>
    <br>
    性别:
    <label >
        男:<input type="radio" name="sex" value="male" v-model="userInfo.gender">
    </label>
    <label >
       女: <input type="radio" name="sex" value="female" v-model="userInfo.gender">
    </label>
    <br>
    爱好:
    <label >
       乒乓球 <input type="checkbox" value="pingpang" v-model="userInfo.favs">
    </label>
    <label >
        足球<input type="checkbox" value="football" v-model="userInfo.favs">
    </label>
    <label >
        篮球<input type="checkbox" value="basketball" v-model="userInfo.favs">
    </label>
    <br>
    城市:
<!--    select标签它的value值是选中的option的value值-->
    <select v-model="userInfo.cityId">
        <option  :value="city.id" v-for="(city,index) in citys" :key="city.id">{{ city.name}}</option>
    </select>
    <br>
    <textarea name="" id="" cols="30" rows="10" v-model="userInfo.desc">

    </textarea>
    <button @click="submit" >提交</button>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.config.productionTip=false;//   去除生产提示
    const vm=new Vue({
        el:"#root",
        data(){
            return {
                citys:[
                    {id:1,name:'北京'},
                    {id:2,name:'上海'},
                    {id:3,name:'深圳'}
                ],
                userInfo:{
                    username:'',
                    password:'',
                    gender:'',
                    favs:[],
                    cityId:1,
                    desc:''
                },
            }
        },
        methods:{
           submit(){
               axios({
                 url:'后台给你的',
                 method:'post',
                 data:this.userInfo
               })
           },
        },
    });
</script>
</body>
</html>